<template>
	<!-- ok -->
	<view class="wanlpage-banner-box">
		<view class="wanlpage-banner-bg">
			
		</view>
		
		<view class="wanlpage-banner" :style="[pageData.style]">
			<swiper class="screen-swiper square-dot" :style="{height: pageData.params.height}" :indicator-dots="true" :circular="true" :autoplay="true" :interval="pageData.params.interval" duration="500">
				<swiper-item v-for="(image, keys) in pageData.data" :key="keys" @tap="$wanlshop.on(image.link)">
					<image :src="$wanlshop.oss(image.image, 414, 0, 1, 'transparent', 'png')" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
	
</template>
<script>
	export default {
		name: "WanlPageBanner",
		props: {
			pageData: {
				type: Object,
				default: function() {
					return {
						name: '',
						type: '',
						params: [],
						style: [],
						data: []
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wanlpage-banner-box{
		position: relative;
		width: 750rpx;
		height: 260rpx;
	}
	
	.wanlpage-banner-bg{
		background-color: #f95037;
		width: 750rpx;
		height: 200rpx;
	}
	
	.screen-swiper{
		min-height: 100rpx !important;
		border-radius: 16rpx;
		image{
			overflow: hidden;
		}
	}
	
	.wanlpage-banner{
		position: absolute;
		top: 0rpx;
		left: 36rpx;
		width: 690rpx;
		height: 276rpx;
	}
	
	.screen-swiper image{
		border-radius: 16rpx;
	}
</style>
